<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>购电订单：</span>
      </div>
      <el-row :gutter="20" class="cardStyle">
        <el-col :span="8" v-for="(item, idx) of list" :key="idx">
          <el-card shadow="never">
            <el-row type="flex" justify="center" align="middle">
              <el-row>
                <el-row type="flex" justify="center">
                  <span class="fontStyle">{{ item.name }}</span>
                </el-row>
                <el-row type="flex" justify="center">
                  <span class="numberStyle">{{ item.con }}</span>
                </el-row>
              </el-row>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    amount: 0,
    quantity: 0,
    price: 0
  };

  protected list: any = [
    { name: "总价（元）", con: 0, id: 0 },
    { name: "数量（度）", con: 0, id: 2 },
    { name: "价格（元）", con: 0, id: 1 }
  ];
  @Watch("data", { deep: true })
  protected init() {
    for (const key in this.data) {
      if (this.data.hasOwnProperty(key)) {
        switch (key) {
          case "amount":
            this.list[0].con = Vue.prototype.$coinToYuan(this.data.amount);
            // this.$set(
            //   this.list[0],
            //   "con",
            //   Vue.prototype.$coinToYuan(this.data.amount)
            // );
            break;
          case "quantity":
            this.list[1].con = this.data.quantity;
            break;
          case "price":
            this.list[2].con = Vue.prototype.$coinToYuan(this.data.price);
            break;
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.fontStyle {
  color: #077be8;
  line-height: 36px;
}
.cardStyle {
  .el-card {
    background: rgba(7, 123, 232, 0.05);
    .fontStyle {
      color: #077be8;
      font-size: 16px;
      line-height: 36px;
    }
    .numberStyle {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
</style>


